import { t } from 'i18next'
import React, { FC } from 'react'
import { Wrap } from './style'
import { Button } from '@kedacom/react-next'
import { ActionButtonsType } from './translator'
import {
	actionButtonsAdd,
	actionButtonsCancel,
	actionButtonsCheckAll,
	actionButtonsCreateMtVmp,
	actionButtonsDelete,
	actionButtonsHangupMts,
	actionButtonsStartMtVmp,
	actionButtonsUnCheckAll,
} from '@/pages/manager/store.actionButton'
import { useActionButtonsStore } from './store'
import useLock from '@/hooks/useLock'

type actionButtons = Record<
	ActionButtonsType,
	{
		label: string
		onClick: () => void
	}
>
const ACTION_BUTTONS: actionButtons = {
	hangUp: {
		label: t('挂断'),
		onClick: () => {
			actionButtonsHangupMts()
		},
	},
	delete: {
		label: t('删除'),
		onClick: () => {
			actionButtonsDelete()
		},
	},
	startMtVmp: {
		label: t('开始录像'),
		onClick: () => {
			actionButtonsStartMtVmp()
		},
	},
	createMtVmp: {
		label: t('创建录像'),
		onClick: () => {
			actionButtonsCreateMtVmp()
		},
	},
	checkAll: {
		label: t('全选'),
		onClick: () => {
			actionButtonsCheckAll()
		},
	},
	unCheckAll: {
		label: t('取消全选'),
		onClick: () => {
			actionButtonsUnCheckAll()
		},
	},
	add: {
		label: t('添加'),
		onClick: () => {
			actionButtonsAdd()
		},
	},
	cancel: {
		label: t('取消'),
		onClick: () => {
			actionButtonsCancel()
		},
	},
}
export const ActionButtons: FC = () => {
	const actions = useActionButtonsStore((state) => state.screenList)
	const handleClick = useLock(async (action: ActionButtonsType) => {
		ACTION_BUTTONS[action].onClick()
	}, 250)
	return actions.length > 0 ? (
		<Wrap>
			{actions.map((action) => (
				<Button
					key={action}
					className={`bottom-btn ${action === 'delete' || action === 'hangUp' ? 'btn-red' : ''}`}
					onClick={() => handleClick(action)}
				>
					{ACTION_BUTTONS[action].label}
				</Button>
			))}
		</Wrap>
	) : null
}
